(function($, win){
  $(function(){
    var num = 0;
    var loop = 0;
    var timer = null;
    selectNav(0);
    timer = setInterval(function(){
      autoPlay();
    },3000)
    // 点击左侧
    $('.pagination').children().on('click',function(){
      clearInterval(timer);
      var index = $(this).index();
      num = index;//点击后自动播放被点击的下一个选项
      $('.banner-bottom-nav-item').eq(num).addClass('active').parent().siblings().find('.banner-bottom-nav-item').removeClass('active')
      var left = -100 * index + "%";
      $('.banner-warp').stop().animate({
        marginLeft:left
      },1000)
      $(this).find('div').stop().animate({
        right: "-30%"
      },500);
      $(this).siblings().find('div').stop().animate({
        right: "-55%"
      },500);
      $(this).find('.pagination-item-text img').stop().show(500);
      $(this).siblings().find('.pagination-item-text img').stop().hide(500);
    })
    //点击banner存储index
    $('.banner-item').on('click',function(){
      var indexStr = $(this).index().toString();
      if($(this).index() == 4){
        win.localStorage.setItem('index', 0);
      }else{
        win.localStorage.setItem('index', indexStr);
      }
    })
    // 鼠标移出右侧，开始自动播放
    $('.content-right').on('mouseleave',function(){
      clearInterval(timer);
      timer = setInterval(function(){
        autoPlay();
      },3000)
    })
    //轮播
    function autoPlay(){
      $('.pagination').children().eq(0)
      num++;
      loop = -100 * num + "%";
      if(num > 4){
        $('.banner-warp').css('marginLeft','0');
        num = 1;
        loop = -100 * num + "%";
      }  
      if(num == 4){
        $('.pagination').children().eq(0).find('div').stop().animate({
          right: "-30%"
        },500);
        $('.pagination').children().eq(0).siblings().find('div').stop().animate({
          right: "-55%"
        },500);
        $('.pagination').children().eq(0).find('.pagination-item-text img').stop().show(500);
        $('.pagination').children().eq(0).siblings().find('.pagination-item-text img').stop().hide(500);
        $('.banner-bottom-nav-item').eq(0).addClass('active').parent().siblings().find('.banner-bottom-nav-item').removeClass('active')
      }
      $('.pagination').children().eq(num).find('div').stop().animate({
        right: "-30%"
      },500);
      $('.pagination').children().eq(num).siblings().find('div').stop().animate({
        right: "-55%"
      },500);
      $('.pagination').children().eq(num).find('.pagination-item-text img').stop().show(500);
      $('.pagination').children().eq(num).siblings().find('.pagination-item-text img').stop().hide(500);
      $('.banner-bottom-nav-item').eq(num).addClass('active').parent().siblings().find('.banner-bottom-nav-item').removeClass('active')
      $('.banner-warp').animate({
        marginLeft: loop
      }, 800)
    }
    // 点击下方导航
    $('.nav').children().on('click',function(){
      $(this).addClass('active').siblings().removeClass('active');
    })
    //上一页
    $('.pre').on('click',function(){
      clearInterval(timer);
      if(num == 0){
        return
      }
      num--;
      var loop = -100 * num + "%"
      $('.banner-warp').animate({
        marginLeft: loop
      }, 1000);
      $('.pagination').children().eq(num).find('div').stop().animate({
        right: "-30%"
      },500);
      $('.pagination').children().eq(num).siblings().find('div').stop().animate({
        right: "-55%"
      },500);
      $('.pagination').children().eq(num).find('.pagination-item-text img').stop().show(500);
      $('.pagination').children().eq(num).siblings().find('.pagination-item-text img').stop().hide(500);
      $('.banner-bottom-nav-item').eq(num).addClass('active').parent().siblings().find('.banner-bottom-nav-item').removeClass('active')
    })
    //下一页
    $('.next').on('click',function(){
      clearInterval(timer);
      if(num == 3){
        return
      }
      num++;
      var loop = -100 * num +"%"
      $('.banner-warp').animate({
        marginLeft: loop
      }, 1000);
      $('.pagination').children().eq(num).find('div').stop().animate({
        right: "-30%"
      },500);
      $('.pagination').children().eq(num).siblings().find('div').stop().animate({
        right: "-55%"
      },500);
      $('.pagination').children().eq(num).find('.pagination-item-text img').stop().show(500);
      $('.pagination').children().eq(num).siblings().find('.pagination-item-text img').stop().hide(500);
      $('.banner-bottom-nav-item').eq(num).addClass('active').parent().siblings().find('.banner-bottom-nav-item').removeClass('active')
    })
    //点击banner底部导航
    $('.banner-bottom-nav-warp').on('click',function(){
      clearInterval(timer);
      $(this).find('.banner-bottom-nav-item').addClass('active').parent().siblings().find('.banner-bottom-nav-item').removeClass('active')
      var warpIndex = $(this).index();
      num = warpIndex;
      var loop = -100 * num +"%"
      $('.banner-warp').stop().animate({
        marginLeft: loop
      }, 1000);
      $('.pagination').children().eq(num).find('div').stop().animate({
        right: "-30%"
      },500);
      $('.pagination').children().eq(num).siblings().find('div').stop().animate({
        right: "-55%"
      },500);
      $('.pagination').children().eq(num).find('.pagination-item-text img').stop().show(500);
      $('.pagination').children().eq(num).siblings().find('.pagination-item-text img').stop().hide(500);
    })
    function selectNav(num){
      $('.pagination-item').eq(num).find('div').stop().animate({
        right: "-30%"
      },500)
      $('.pagination-item').eq(num).siblings().find('div').stop().animate({
        right: "-55%"
      },500);
      $('.pagination-item').eq(num).find('.pagination-item-text img').stop().show(500);
      $('.pagination-item').eq(num).siblings().find('.pagination-item-text img').stop().hide(500);
      $('.banner-bottom-nav-item').eq(num).addClass('active').parent().siblings().find('.banner-bottom-nav-item').removeClass('active')
    }
  })
})(jQuery, window)

